<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { defaultMapStore } from '@/store'
import { Graticule, Layer } from 'ol/layer'
import { WindLayer } from 'ol-wind'
import { Stroke } from 'ol/style'
import Map from 'ol/Map'

const prefix = import.meta.env.VITE_BASE_URL
const { proxy }: any = getCurrentInstance()
const active= ref(false)
const historyActive = ref(false)
const xuanze = ref(true)
const graticuleActive = ref(true)
let graticuleLayer: Graticule, fengchang: any, hailang: any
defaultMapStore().setActive(historyActive)
const topbox = [
  {
    name: '历史',
    iconName: '&#xe7d4;',
    triggerEvent: () => {
      historyActive.value = !historyActive.value
    }
  },
  {
    name: '云图',
    iconName: '&#xe61b;',
    triggerEvent: () => {

    }
  },
  {
    name: '雷达',
    iconName: '&#xe66c;',
    triggerEvent: () => {

    }
  },
  {
    name: '风场',
    iconName: '&#xe600;',
    triggerEvent: () => {
      addFengChang()
    }
  },
  {
    name: '海浪',
    iconName: '&#xe6b0;',
    triggerEvent: () => {
      addHaiLang()
    }
  }
]
const mapOverLay = [
  {
    name: '叠加渔场',
    iconName: '&#xe60f;',
    triggerEvent: () => {
      console.log(111)
    }
  },
  {
    name: '经纬网格',
    iconName: '&#xea98;',
    triggerEvent: () => {
      setGraticule()
      active.value = false
    }
  },
  {
    name: '台风科普',
    iconName: '&#xe601;',
    triggerEvent: () => {
      console.log(111)
    }
  },
  {
    name: '渠道矩阵',
    iconName: '&#xe67c;',
    triggerEvent: () => {
      console.log(111)
    }
  },
  {
    name: '图例',
    iconName: '&#xe643;',
    triggerEvent: () => {
      console.log(111)
    }
  },
  {
    name: '关于',
    iconName: '&#xe647;',
    triggerEvent: () => {
      console.log(111)
    }
  }
]
const reflesh = () => {
  location.reload()
}
const addFengChang = () => {
  const map = defaultMapStore().getMap()
  if (!fengchang) {
    const map: Map = defaultMapStore().getMap()
    proxy.axios.get(prefix + '/static/data/FengChang.json').then((res: any) => {
      // 第一种加载风场的方案：使用ol-wind插件提供的WindLayer
      // const windLayer = new WindLayer(res.data['2024020202'], {
      //   forceRender: false,
      //   windOptions: {
      //     velocityScale: 1 / 20,
      //     paths: 5000,
      //     lineWidth: 3,

      //     colorScale: ["rgb(36,104, 180)", "rgb(60,157, 194)", "rgb(128,205,193 )", "rgb(151,218,168 )", "rgb(198,231,181)", "rgb(238,247,217)", "rgb(255,238,159)", "rgb(252,217,125)", "rgb(255,182,100)", "rgb(252,150,75)", "rgb(250,112,52)", "rgb(245,64,32)", "rgb(237,45,28)", "rgb(220,24,32)", "rgb(180,0,35)"],
      //     generateParticleOption: false
      //   },
      //   map: map,
      //   projection: 'EPSG:4326'
      // })
      // console.log(windLayer)
      // 第二种加载风场的方案：使用windy.js在canvas图上进行绘画
      console.log(res)
      fengchang = new proxy.$fengchang(map, res.data['2024020202'], '风场')
      let canvas = fengchang.getCanvas()
      canvas.style.display = 'block'
    })
  } else {
    let canvas = fengchang.getCanvas()
    map.getAllLayers().forEach((layer: Layer) => {
      if (layer.get('name') === '风场') {
        map.removeLayer(layer)
        canvas.style.display = 'none'
      }
    })
    fengchang = null
  }
}
const addHaiLang = () => {
  const map = defaultMapStore().getMap()
  if (!hailang) {
    const map: Map = defaultMapStore().getMap()
    proxy.axios.get(prefix + '/static/data/HaiLang.json').then((res: any) => {
      // 使用ol-wind插件添加海浪
      hailang = new WindLayer(res.data.data.data, {
        name: '海浪',
        forceRender: false,
        windOptions: {
          velocityScale: 1 / 20,
          paths: 5000,
          lineWidth: 10,
          colorScale: 'white',
          generateParticleOption: false
        },
        projection: 'EPSG:4326'
      })
      map.addLayer(hailang)
    })
  } else {
    map.getAllLayers().forEach((layer: Layer) => {
      if (layer.get('name') === '海浪') {
        map.removeLayer(layer)
      }
    })
    hailang = null
  }
}
const setGraticule = () => {
  const map: Map = defaultMapStore().getMap()
  if (graticuleActive.value) {
    map.getAllLayers().forEach((layer: Layer) => {
      if (layer instanceof Graticule) {
        map.removeLayer(layer)
        return
      }
    })
    graticuleLayer = new Graticule({
      strokeStyle: new Stroke({
        color: 'rgba(12, 12, 12, 0.5)',
        width: 0.5,
        lineDash: [5, 5]
      }),
      targetSize: 150,
      properties: {
        name: '经纬网格'
      }
    })
    map.addLayer(graticuleLayer)
    graticuleActive.value = !graticuleActive.value
  } else {
    map.getAllLayers().forEach((layer: Layer) => {
      if (layer instanceof Graticule) {
        map.removeLayer(layer)
        graticuleActive.value = !graticuleActive.value
        return
      }
    })
  }
}
</script>

<template>
  <view class="rightbox">
    <view class="user">
      <view class="iconfont">&#xe701;</view>
    </view>
    <view class="OverlayCtn">
      <view class="topbox">
        <ul class="container">
          <li v-for="(item, index) in topbox" :key="index" @click="item.triggerEvent">
            <view class="iconfont gray" v-html="item.iconName"></view>
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </view>
      <view class="reflesh">
        <view class="iconfont gray" @click="reflesh">&#xe6d7;</view>
      </view>
      <view class="bottombox" @click="active = true">
        <view class="unfold-btn">
          <view class="iconfont">&#xe790;</view>
        </view>
        <transition name="menu">
          <view class="hideMenu" v-show="active">
            <view class="title">地图叠加</view>
            <ul>
              <!--阻止事件冒泡用.stop-->
              <li v-for="(item, index) in mapOverLay" :key="index" @click.stop="item.triggerEvent">
                <view class="iconfont gray" v-html="item.iconName"></view>
                <view class="wenzi">{{ item.name }}</view>
              </li>
            </ul>
            <view class="toggle">
              <text class="zhongwen" :class="{ 'xuanze': xuanze }" @click.stop="xuanze = !xuanze">中文</text>
              <text class="yingwen" :class="{ 'xuanze': !xuanze }" @click.stop="xuanze = !xuanze">English</text>
            </view>
            <Teleport to="body">
              <view :class="{ 'bgcover': active }" @click="active = false"></view>
            </Teleport>
          </view>
        </transition>
      </view>

    </view>
  </view>
</template>

<style lang="scss">
@import '@/assets/mixin.scss';

.rightbox {
  @include positionTopRight(absolute, 0.3rem, 0.4rem);
  z-index: 1000;

  .user {
    @include wHbgc(1.323rem, 1.323rem);
    @include flex(center, center);
    box-shadow: 0 0.09rem 0.2rem 0 rgba(0, 0, 0, .17);
    border-radius: 20%;
    text-align: center;
    color: #b2d7ff;
    user-select: none;

    view.iconfont {
      font-size: 0.8rem;
      color: #b2d7ff;
    }
  }

  .OverlayCtn {
    margin-top: 0.32rem;

    .topbox {
      @include wHbgc(1.3233rem, 6rem);
      border-radius: 0.15rem;
      box-shadow: 0 2px 0.15rem 0 rgba(0, 0, 0, .48);

      .container {
        margin: 0 auto;
        width: 0.8rem;
        height: 100%;

        li {
          @include flex(space-evenly, center);
          flex-direction: column;
          height: 20%;
          border-bottom: 1px solid #DCDCDC;
          padding: 0.1rem 0 0.2rem;
          cursor: pointer;

          &:last-child {
            border: none;
          }

          view.iconfont {
            font-size: 0.4rem;
          }

          p {
            font-size: 0.28rem;
            color: #333333;
          }
        }
      }
    }

    .reflesh {
      @include positionBottomRight(fixed, 1.1rem, 1.2rem);
      @include wHbgc(1rem, 1rem);
      @include flex(center, center);
      box-shadow: 0 0.29333rem 0.72rem 0 rgba(0, 0, 0, .17);
      border-radius: 50%;
      z-index: 1000;
      cursor: pointer;

      view.iconfont {
        font-size: 0.556rem;
        font-weight: bold;
      }
    }

    .bottombox {
      @include positionBottomRight(fixed, 1.1rem, 0.1rem);
      @include wHbgc(1rem, 1rem);
      @include flex(center, center);
      border-radius: 50%;
      z-index: 1000;
      background-image: linear-gradient(0deg, #097aff, #3c9cff), linear-gradient(#fff, #fff);
      box-shadow: 0 0 0.42667rem 0 rgba(0, 117, 255, .44);
      cursor: pointer;
      user-select: none;

      .unfold-btn .iconfont {
        color: #fff;
        font-size: 0.8rem;
      }

      .hideMenu {
        @include positionTopRight(fixed, 0, 0);
        @include wHbgc(6rem, 100%);
        background: url('/static/images/popupbj.png') no-repeat;
        background-size: cover;
        z-index: 1000;
        transition: transform .6s ease-out;
        transform-origin: 100%;
        cursor: initial;

        .title {
          width: 100%;
          color: #fff;
          padding: 0.3rem 0.6rem;
          background-color: #3397ff;
          letter-spacing: 1px;
          font-size: 0.45rem;
        }

        ul {
          margin-top: 0.3rem;
          margin-right: 0.9rem;
          cursor: pointer;

          li {
            @include grid(repeat(2, 1fr), auto);
            font-size: 0.45rem;
            width: 100%;
            margin-top: 1rem;
            color: #333333;

            view.iconfont {
              padding-left: 1.2rem;
              font-size: 0.5rem;
            }
          }
        }

        .toggle {
          @include positionBottomLeft(absolute, 1rem, 50%);
          width: 3rem;
          transform: translateX(-50%);
          font-size: 0.2rem;

          text {
            display: inline-block;
            width: 50%;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #249ce8;
            font-size: 0.3rem;
            cursor: pointer;
          }

          .zhongwen {
            border-top-left-radius: .53333rem;
            border-bottom-left-radius: .53333rem;
            border: 1px solid #249ce8;
          }

          .yingwen {
            border-top-right-radius: .53333rem;
            border-bottom-right-radius: .53333rem;
            border: 1px solid #249ce8;
            border-left: none;
          }

          .xuanze {
            background: rgb(36, 156, 232);
            color: rgb(255, 255, 255);
          }
        }

        &.menu-enter-active {
          transform: scaleX(1);
        }

        &.menu-enter-from {
          transform: scaleX(0);
        }

        &.menu-leave-active {
          transform: scaleX(0);
        }
      }
    }
  }
}

.bgcover {
  @include positionTopLeft(fixed, 0, 0);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 999;
}
</style>
